<template>
	<view class="zhaofang">
		<view class="h_background">
			<h3>找房</h3>
		</view>	
		<view class="card">
			<h3 class="pink">帮我找房</h3>
			<p><u-icon name="edit-pen-fill" class="u-icon"></u-icon><input type="text" class="input_search" placeholder="请输入意向城市、区域、意向楼盘"></p>
			<p><input type="text" placeholder="请输入姓名"><text class="shu">|</text><input type="text" placeholder="请输入手机号"></p>
			
			<view>隐私保护已开启</view>
			<button class="send">发布请求</button>
			<view class="kefu">当前有148位置业顾问为您服务</view>
		</view>
		<view class="gird">
			<dl v-for="(item,index) in girdlist" :key="index">
				<dd>
					<text>{{ item.title }}</text>
					<text class="desc">{{ item.desc }}</text>
				</dd>
				<dt></dt>
			</dl>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				girdlist:[
					{
						title:"新房",
						desc:"热门新楼盘>",
						img:""
					},
					{
						title:"经纪人",
						desc:"优选置业顾问>",
						img:""
					},
					{
						title:"地图找房",
						desc:"查看附近好房源>",
						img:""
					},
					{
						title:"楼市圈",
						desc:"楼市最新动态>",
						img:""
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.zhaofang{
		width: 100vw;
		height: 100vh;
		.h_background{
			width: 100vw;
			height: 120px;
			background-color: rgb(0, 153, 255);
			padding-top: 30px;
			h3{
				width: 100vw;
				text-align: center;
			}
		}
		.card{
			width: 86vw;
			height: 340px;
			border-radius: 20px;
			border: 2px solid #ccc;
			margin: 0 auto;
			box-shadow: 0px 3px 3px 5px rgba(0, 0, 0, 0.5);
			p{
				width: 95%;
				display: flex;
				justify-content: space-around;
				margin: 15px 5px;
				border-bottom: 2px solid #ccc;
				.u-icon{
					width: 40px;
				}
				.input_search{
					flex: 1;
				}
				input{
					height: 40px;
					line-height: 40px;
				}
				.shu{
					height: 40px;
					font-size: 24px;
				}
			}
			.pink{
				width: 100%;
				background-color: rgb(225, 167, 176);
				height: 60px;
				line-height: 60px;
				border-radius: 20px 20px 0px 0px;
				text-align: center;
				font-size: 24px;
				color: rgb(154, 21, 21);
			}
			.send{
				width: 90%;
				background-color: rgb(163, 104, 114);
				color: rgb(255, 255, 255);
				margin-top: 10px;
			}
			.kefu{
				margin: 15px auto;
				border: 2px solid rgb(189, 62, 62);
				width: 90%;
				color: rgb(189, 62, 62);
				height: 20px;
				line-height: 20px;
				border-radius: 20px;
				text-align: center;
			}
		}
		.gird{
			width: 86vw;
			margin: 0 auto;
			column-count: 2;
			margin-top: 20px;
			dl{
				display: flex;
				justify-content: space-between;
				height: 60px;
				dd{
					width: 60%;
					height: 100%;
					display: flex;
					flex-direction: column;
					
					.desc{
						font-size: 10px;
					}
				}
				dt{
					flex: 1;
				}
			}
		}
	}
</style>
